@use "scss/colors";
@use "scss/variables";
@use "scss/z-indices";

%cover {
  width: 100%;
  height: 100%;
}

.schemaChangeBackdropContainer {
  @extend %cover;

  position: relative;

  .backdrop {
    @extend %cover;

    position: absolute;
    background: linear-gradient(180deg, rgba(248, 248, 250, 50% /* grey-50 50% */) 0%, colors.$foreground 92.54%);
    z-index: z-indices.$schemaChangesBackdrop;
    border-radius: variables.$border-radius-lg;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(2px);
  }

  .contentContainer {
    @extend %cover;

    position: fixed;
    margin-top: 200px;
    display: flex;
    z-index: z-indices.$schemaChangesBackdropContent;
    width: variables.$width-modal-sm;
    max-width: 40%;
    flex-direction: column;
    align-items: center;
    gap: variables.$spacing-lg;
  }
}
